<template>
    <el-dialog
      v-model="dialogVisible"
      :destroy-on-close="true"
      :align-center="true"
      width="50%"
      title="零工服务协议"
      style="padding: 20px"
    >
      <el-form
        ref="jobFormRef"
        :model="dialogData.itemInfo"
        label-width="120px"
        label-suffix=" :"
      >
            <div class="protocol-box">
              <WangEditor :hideToolBar="true" height="600px" v-model:value="dialogData.itemInfo.content" />
            </div>
      </el-form>
      <template #footer>
        <el-button type="primary" :loading="btnLoading" @click="agreeJobProtocol">同意并发布</el-button>
      </template>
    </el-dialog>
  </template>
  <script setup lang="ts">
  import { ref, reactive } from "vue";
  import { getOptTitle, OptEnum } from "@/biz/eenum/appEnum";
  import { DialogParam } from "@/biz/interface/DialogType";
  import { FlexJobProtocolVo } from "@/biz/interface/FlexjobType";
  import { jobFlexjobProtocolApi } from "@/api/modules/cpyjob/flexjob";
  import { ElMessage, FormInstance } from "element-plus";
  import WangEditor from "@/components/WangEditor/index.vue";

  //页面的数据
  interface flexjobProtocolDialogOption extends DialogParam {
    //弹出表单的标题
    title: string;
    //当前的数据对象
    itemInfo: FlexJobProtocolVo;
    //其它的数据都继续在这里加
  }
  //提交按钮，避免多次提交
  const btnLoading = ref(false);
  //弹出框的参数
  const dialogVisible = ref(false);
  //当前表单数据在这里初始化
  const dialogData = reactive<flexjobProtocolDialogOption>({
    optType: OptEnum.UNKNOW,
    title: "",
    itemInfo: {}
  });
  
  // 接收父组件传过来的参数
  const acceptParams = (params: DialogParam): void => {
    dialogData.optType = params.optType;
    dialogData.rowData = params.rowData;
    dialogData.title = getOptTitle(dialogData.optType);
  
    initItemInfo();
    // if (dialogData.rowData) {
    //   dialogData.itemInfo.jobId = dialogData.rowData.jobId;
    // }
    // 获取岗位协议
    getJobProtocol();
  
    dialogVisible.value = true;
  };
  
  //初始化页面的数据
  const initItemInfo = (): void => {
    dialogData.itemInfo = {  };
  };
  
  //获取零工岗位的发布协议 (type:11) 固定参数
  const getJobProtocol = ()=>{
    jobFlexjobProtocolApi({type:11}).then(res=>{
        console.log(res);
        dialogData.itemInfo.content = "";
        if(res && res.data){
            dialogData.itemInfo.content = res.data.content;
        }
    })
  }

  const jobFormRef = ref<FormInstance>();
  // 回复报价人的报价
  const agreeJobProtocol = ()=>{
    btnLoading.value = true;
    jobFormRef.value!.validate(async valid => {
    if (!valid) {
      btnLoading.value = false;
      return;
    }

    // console.log("要提交的数据", dialogData.itemInfo)
    try {
       // 需要更新为已弹开过窗口, 目前不处理
       ElMessage.success({message:'同意零工服务协议' });
       emits("agree-protocol");
       dialogVisible.value = false;

    } catch (error) {
      // ElMessage.error({ message: error?.message });
    } finally {
      btnLoading.value = false;
    }
  });
  };

  //页面事件
  const emits = defineEmits(["agree-protocol"]);

  //页面参数
  defineExpose({
    acceptParams
  });
  </script>
  <style scoped lang="scss"> 
</style>
  